import React, { Component } from "react";
import { Form, InputNumber, Select, Row, Col } from "antd";
import styles from "./BottomInfo.less";

const { Option } = Select;

@Form.create()
class BottomInfo extends Component {
  render() {
    return (
      <div className={styles.root}>
        <Form>
          <span className={styles.basic}>告警配置</span>
          <Row>
            <Col
              span={8}
              style={{
                display: "flex",
                justifyContent: "flex-end",
                color: "rgba(0,0,0,0.85)",
                lineHeight: "33px",
              }}
            >
              告警触发条件：
            </Col>
            <Col span={16} style={{ width: 580 }}>
              <div>
                <div style={{ marginBottom: 10 }}>
                  限制时间单位
                  <Select
                    style={{ width: 170, marginLeft: 8, marginRight: 8 }}
                    defaultValue={3}
                    onChange={this.props.getLimitUnit}
                    value={this.props.limitUnit}
                  >
                    <Option value={2}>1小时</Option>
                    <Option value={3}>1天</Option>
                  </Select>
                  {/* <span>最多告警</span>
                  <InputNumber
                    onChange={this.props.getRestrainValue}
                    value={this.props.restrainValue}
                    min={0}
                    style={{ width: 170, marginLeft: 8, marginRight: 8 }}
                    placeholder="请输入数字"
                  />
                  次 */}
                </div>
                <div>
                  消息分发失败
                  <InputNumber
                    onChange={this.props.getLimitValue}
                    value={this.props.limitValue}
                    min={0}
                    style={{ width: 170, marginLeft: 8, marginRight: 8 }}
                    placeholder="请输入数字"
                  />
                  次，推送告警信息到告警目标
                </div>
              </div>
            </Col>
          </Row>
          <Row style={{ marginTop: 16 }}>
            <Col
              span={8}
              style={{
                display: "flex",
                justifyContent: "flex-end",
                color: "rgba(0,0,0,0.85)",
                lineHeight: "33px",
              }}
            >
              告警推送规则：
            </Col>
            <Col span={16} style={{ fontSize: 14 }}>
              <div>
                <div style={{ marginBottom: 10 }}>
                  限制时间单位
                  <InputNumber
                    onChange={this.props.getRestrainValue}
                    value={this.props.restrainValue}
                    min={0}
                    style={{ width: 170, marginLeft: 8, marginRight: 8 }}
                    placeholder="请输入数字"
                  />
                  <Select
                    style={{ width: 170, marginLeft: 8, marginRight: 8 }}
                    defaultValue={1}
                    onChange={this.props.getRestrainUnit}
                    value={this.props.restrainUnit}
                  >
                    <Option value={1}>分钟</Option>
                    <Option value={2}>小时</Option>
                    <Option value={3}>天</Option>
                  </Select>
                  不再产生警告
                </div>
              </div>
            </Col>
          </Row>
        </Form>
      </div>
    );
  }
}

export default BottomInfo;
